<!--
 * FilePath     : \src\views\home\components\hotSaleBrand.vue
 * Author       : SJZ
 * Date         : 2025-03-24 21:18
 * LastEditors  : SJZ
 * LastEditTime : 2025-04-08 21:26
 * Description  : 热销产品
 * CodeIterationRecord: 
 -->
<template>
  <div class="mt-50 px-10% box-border">
    <div class="aline-between">
      <h1>Hot-Sale <span class="theme-color-primaryFontColor">Brands</span></h1>
      <h3 class="b-b-dashed b-b-1 theme-bc-borderColor pb-3 theme-color-info cursor-pointer">MORE BRANDS</h3>
    </div>
    <div class="aline-start">
      <div
        class="w-12% my-10 text-center cursor-pointer hover:(scale-95 brightness-110)"
        v-for="(brand, index) in hotSaleBrands"
        :key="index"
        :title="brand.name"
      >
        <img class="w-60% h-60% b-solid b-1 theme-bc-borderColor rd-50% object-contain" :src="brand.logo" :alt="brand.name" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps({
  hotSaleBrands: {
    type: Array as PropType<Record<string, string>[]>,
    require: true
  }
});
</script>
